<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  {if $theme['yixuanbanquan']==0}
  <title>{php echo !empty($theme['USERCOMPANYNAME'])?$theme['USERCOMPANYNAME']:$_G['companyname'];} 实时投屏</title>
  {else}
  <title>{$shopname} 实时投屏</title>
  {/if}
  <!--  <link rel="stylesheet" type="text/css" href="{$_G['URL']['DAPING_CSS']}css/reset.css" />-->
  <!--  <link rel="stylesheet" type="text/css" href="{$_G['URL']['DAPING_CSS']}css/index03.css?v=5" />-->


  <!--  <script src="{$_G['URL']['DAPING_CSS']}js/webappREM2.JS"></script>-->
  <script src="{$_G['URL']['DAPING_CSS']}laydate/laydate.js"></script>
  <script src="{$_G['URL']['DAPING_CSS']}js/jquery-3.3.1.min.js"></script>

  <style type="text/css">
    {if $ismobile}
    .all1{
      display: table;
      word-spacing:-5px;
      width: 100%;
      max-width:1200px; margin:0 auto;
      color: #666;
    }
    .team{
      display: inline-block;
      width: 32%;
      word-spacing:-5px;
      color: #666;
      margin-right:2%;
    }
    .team:nth-child(3n){ margin-right:0;}
    .name_order{
      text-align: center;
    }
    .name_order1{
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-weight: 400;
      font-size: 24px;
      /* border: 2px solid black; */
      border-top: 1px solid #cad9ea;
      border-left: 2px solid #cad9ea;
      border-right: 2px solid #cad9ea;
      border-bottom: 1px solid #cad9ea;
      box-sizing:border-box;
    }
    .name{
      display: inline-block;
      font-weight: 400;
      /*border: 1px solid black;*/
      border-right: 1px solid #cad9ea;
      border-bottom: 1px solid #cad9ea;
      border-left: 2.4px solid #cad9ea;
      width: 59%;
      height: 30px;
      line-height: 30px;
      box-sizing:border-box;
    }
    .name1{
      display: inline-block;
      /*border: 1px solid black;*/
      border-bottom: 1px solid #cad9ea;
      box-sizing:border-box;
      width: 39%;
      border-right: 2px solid #cad9ea;
      height: 30px;
      line-height: 30px;
    }
    .a1{
      background-color: #f5fafe;
    }
    .btm{
      border-bottom: 2px solid #cad9ea;
    }

    {else}
    .all1{
      display: table;
      word-spacing:-5px;
      width: 100%;
      color: #666;
    }
    .team{
      display: inline-block;
      width: 180px;
      word-spacing:-5px;
      color: #666;
      vertical-align: top;
    }
    .name_order{
      text-align: center;
    }
    .name_order1{
      width: 162px;
      margin-left: 7px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      font-weight: 400;
      font-size: 24px;
      /* border: 2px solid black; */
      border-top: 1px solid #cad9ea;
      border-left: 2px solid #cad9ea;
      border-right: 2px solid #cad9ea;
      border-bottom: 1px solid #cad9ea;
    }
    .name{
      display: inline-block;
      font-weight: 400;
      /*border: 1px solid black;*/
      border-right: 1px solid #cad9ea;
      border-bottom: 1px solid #cad9ea;
      border-left: 2.4px solid #cad9ea;
      width: 100px;
      height: 30px;
      line-height: 30px;
    }
    .name1{
      display: inline-block;
      /*border: 1px solid black;*/
      border-bottom: 1px solid #cad9ea;
      width: 60px;
      border-right: 2px solid #cad9ea;
      height: 30px;
      line-height: 30px;
    }
    .a1{
      background-color: #f5fafe;
    }
    .btm{
      border-bottom: 2px solid #cad9ea;
    }

    {/if}
    .user-icon img {
      border: 2px solid #ffffff;
      width: 30px;
      border-radius: 50%;
    }
    .lmsz_cont { padding-top:10px;}
    .itemnew {overflow:hidden; width:100%; max-width:1200px; box-sizing:border-box; padding-left:8px; margin:0 auto;}
    .itemnew input { float:left; width:calc(50% - 250px); box-sizing:border-box; padding:0; border:1px solid #eeeeee; outline:none; height:50px; border-radius:4px;}
    .itemnew span { margin:0 20px; float:left; line-height:50px;}

    .itemnew_button {float: left;
      height: 50px;
      border-radius: 4px;
      font-size: 16px;
      display: block;
      margin-left: 20px;
      width: 100px;
      border: none;
      background: #cad9ea;
      text-align: center;
      line-height: 50px;
      color: #000000;
      text-decoration:none;
    }

    .lmsz_cont .itemnew p {

      float:left;
      line-height:50px; margin:0;
      margin-right:20px;
    }
    .lmsz_cont .itemnew {
      /* border-bottom: 1px solid #dedddd; */
      /* height: 1.1rem; */
      padding-top: 2px;
    }
    .ui-flex { padding-bottom:20px!important; border-bottom:1px solid #eeeeee; overflow:hidden;}
    .ui-flex .user-icon { width:38px; float:left;}
    .rightTxt { width:calc(100% - 48px); float:right;}
    .textTop { overflow:hidden; margin-bottom:10px!important;}
    .textTop span { display:block; float:left;}
    #new-order-list { width:100%; max-width:1200px; margin:0 auto;}
    #new-order-list * { padding:0; margin:0; list-style:none;}
    #new-order-list ul { margin-top:40px; overflow:hidden;}
    #new-order-list li { float:left; width:32%; margin-right:2%; margin-bottom:15px; box-sizing:border-box;}
    #new-order-list li:nth-child(3n){ margin-right:0;}
    .dataInfor { text-align:center;}
    .dataInfor p { display:inline-block; font-size:26px; margin:0 50px; padding-top:50px;line-height:1;}
    .dataInfor p span { color:#cad9ea}
    .dataInfor2 { text-align:center;}
    .dataInfor2 p { display:inline-block; font-size:16px; padding-top: -100px; padding-left: 40%; line-height:2;}
    .dataInfor2 p span { color:#cad9ea}
    .lmsz_cont input { text-indent:10px;}
  </style>
</head>
<body>

<form action="/{php echo createMobileUrl('w_daping_lingze',array("themeid"=>$themeid,"op"=>'get','dpkey'=>$_P['dpkey']));}" method="get">
<div class="lmsz_cont">
  <div class="itemnew">
    <p>时间: </p>
    <input type="text" autocomplete="off" name="starttime" id="start_date" class="layui-input" placeholder="开始日期" value="{$starttime}"><span>-</span><input type="text" name="endtime" autocomplete="off" id="end_date" class="layui-input" placeholder="结束日期" value="{$endtime}">
    <button class="l_btn itemnew_button" type="sumbit">搜索</button>
    <a href = "/{php echo createMobileUrl('w_daping_lingze',array("themeid"=>$themeid,"op"=>'pre',"starttime"=>$starttime,"endtime"=>$endtime,'dpkey'=>$_P['dpkey']));}" class="l_btn itemnew_button" type="sumbit">前1小时</a>
    <a href = "/{php echo createMobileUrl('w_daping_lingze',array("themeid"=>$themeid,"op"=>'after',"starttime"=>$starttime,"endtime"=>$endtime,'dpkey'=>$_P['dpkey']));}"  class="l_btn itemnew_button" type="sumbit">后1小时</a>
  </div>
</div>
</form>
<div class="dataInfor">
  <p>期间单量：<span id="timetotal">{$timetotal}</span></p>
  <p>总单量：<span id="alltotal">{$alltotal}</span></p>
</div>
<div class="dataInfor2">
  <p id="noworker">
    {if $count[0]>0}
    无员工信息：<span>{$count[0]}</span>
    {/if}
  </p>
  <div class="all1">

  </div>
</div>



<div id="new-order-list" class="all2"></div>
<div style="display: none;">
  <audio id="haveorder" autoplay>
  </audio>
  <audio id="haveorder1" autoplay>
  </audio>
</div>

</body>
</html>

<script>
  var startDate = laydate.render({
    elem: '#start_date',//开始时间选择控件id
    min:'2018-6-1',
    type: 'datetime',
    format: 'yyyy-MM-dd HH:mm', //可任意组合
    done: function (value, date) {
      if (value !== '') {
        endDate.config.min.year = date.year;
        endDate.config.min.month = date.month - 1;
        endDate.config.min.date = date.date;
        endDate.config.min.hours=date.hours;
        endDate.config.min.minutes=date.minutes;

      } else {
        endDate.config.min.year = '';
        endDate.config.min.month = '';
        endDate.config.min.date = '';
        endDate.config.min.hours = '';
        endDate.config.min.minutes = '';
      }
    }
  });

  //设置结束时间
  var endDate = laydate.render({
    elem: '#end_date',//结束时间选择控件id
    type: 'datetime',
    format: 'yyyy-MM-dd HH:mm', //可任意组合
    done: function (value, date) {
      if (value !== '') {
        startDate.config.max.year = date.year;
        startDate.config.max.month = date.month - 1;
        startDate.config.max.date = date.date;
        startDate.config.max.hours = date.date;
        startDate.config.max.minutes = date.date;
      } else {
        startDate.config.max.year = '';
        startDate.config.max.month = '';
        startDate.config.max.date = '';
        startDate.config.max.hours = '';
        startDate.config.max.minutes = '';
      }
    }
  });
</script>

<script>
  let hiddenTime,visibleTime;
  $(function(){
    newBlessingBagAjax();
    visibleTime = setInterval(newBlessingBagAjax, {php echo empty($refresh_time)?5000:$refresh_time;});
    document.addEventListener('visibilitychange', function() {
              // 页面变为不可见时触发
              if (document.visibilityState == 'hidden') {
                if(visibleTime) {
                  clearInterval(visibleTime);
                }
                hiddenTime = setInterval(newBlessingBagAjax,60000);
              }
              // 页面变为可见时触发
              if (document.visibilityState == 'visible') {
                if (hiddenTime) {
                  clearInterval(hiddenTime);
                }
                visibleTime = setInterval(newBlessingBagAjax, {php echo empty($refresh_time)?5000:$refresh_time;});
              }
        });
  })

  if(!/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
    if (window.screen.widt<900){
      alert("当前电脑分辨率过底，建议调至1024*768以上")
    }else if (document.body.clientWidth<800){
      alert("请将页面最大化或全屏查看，效果更佳！")
    }
  }
  var endids = 0;
  function newBlessingBagAjax(){
    var url="/{php echo createMobileUrl('w_daping_lingze',array("themeid"=>$themeid,"op"=>'get',"starttime"=>$starttime,"endtime"=>$endtime,'dpkey'=>$_P['dpkey']));}";
    $.getJSON(url, function(omg){
              // console.log(omg)
              if(omg.code == 200){
                // 火速报名中
                $('.all1').html(omg.txt);
                $('#alltotal').html(omg.alltotal);
                $('#timetotal').html(omg.timetotal);
                $('#noworker').html(omg.noworker);
                // 最新定单
                var list ='<ul>';
                for (var i = 0; i < omg.data.length; i++) {
                  list += `
                    <li>
                      <div class="ui-flex item">
                          <div class="user-icon"><img src="${omg.data[i].avatar}"></div>
                          <div class="rightTxt">
                            <div class="textTop">
                               <span style="width: 30%;">${i+1}.${omg.data[i].babyname}</span>
                               <span style="width: 70%;text-align: left">${omg.data[i].wkname}</span>
                           </div>
                           <span style="text-align: right;color:#6286a2">${omg.data[i].datetime}</span>
                       </div>
                      </div>
                </li>
              `;
                }
                list +='</ul>';

                $("#new-order-list").html(list);

                // 自动播放定单
                if(endids<omg.data[0].id){
                  playordermusic(omg.data[0].babyname,omg.data[0].wkname);
                  endids=omg.data[0].id;
                }
              }
            }
    );
  }

  /**
   * 时间戳转时间
   * @param  {[type]} timeStamp 时间戳
   * @return {[type]}           YYYY-mm-dd HH:ii:ss
   */
  function formatDateTime() {
    var date = new Date()
    var y = date.getFullYear();
    var m = date.getMonth() + 1;
    m = m < 10 ? ('0' + m) : m;
    var d = date.getDate();
    d = d < 10 ? ('0' + d) : d;
    var h = date.getHours();
    h = h < 10 ? ('0' + h) : h;
    var minute = date.getMinutes();
    var second = date.getSeconds();
    minute = minute < 10 ? ('0' + minute) : minute;
    second = second < 10 ? ('0' + second) : second;
    // return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;
    return h+':'+minute+':'+second;
  };

  setInterval(function(){
    $('#now_time').html(formatDateTime())
  },1000);

  setTimeout(function(){
    $('.noticeTag').fadeOut();
  },3000)
  // 语音播报
  function playordermusic(lastordername,lastorderyg){
    var text=lastorderyg+"您的客户"+lastordername+"刚刚下了单，请及时处理！";
    var music1 = "{$_G['URL']['DAPING_CSS']}music/ordermusic.mp3";
    var music2= "{$yxurl}"+encodeURI(encodeURI(text));
    // alert(music2)
    // var audio1=$('#haveorder')[0];
    // $(audio1).attr('src',music1);
    // audio1.play();
    // audio1.pause();
    // audio1.play();
    //
    // audio1.addEventListener("ended", function(){
    var audio2=$('#haveorder1')[0];
    $(audio2).attr('src',music2);
    audio2.play();
    audio2.pause();
    audio2.play();
    // });

  }

  // 监听手机微信提示音
  document.addEventListener("WeixinJSBridgeReady", function () {
    document.getElementById('haveorder').play();
    document.getElementById('haveorder1').play();
  }, false);
</script>
